<template>
  <transition name="slide">
  <div class="set">
    <ul class="set_ul">
      <!--<li class="set_li">-->
        <!--<div class="set_title">头像</div>-->

        <!--<span class="iconfont icon-getmore-icon"></span>-->
        <!--<div class="img_grp">-->
          <!--<img src="" alt="">-->
        <!--</div>-->
      <!--</li>-->
      <li class="set_li">
        <div class="set_title">昵称</div>
        <span class="iconfont icon-getmore-icon"></span>
        <span class="user_name">路人甲</span>
      </li>
      <li class="set_li">
        <div class="set_title">性别</div>
        <span class="iconfont icon-getmore-icon"></span>
        <span class="sex">女</span>
      </li>

      <router-link tag="li" to="/change_phone" class="set_li">
        <div class="set_title">手机号</div>
        <span class="iconfont icon-getmore-icon"></span>
        <span class="user_phone">166****6386</span>
      </router-link>

      <!--<li class="set_li">-->
        <!--<div class="set_title">电子邮箱</div>-->
        <!--<span class="iconfont icon-getmore-icon"></span>-->
        <!--<span class="user_email">279848012@qq.com</span>-->
      <!--</li>-->

      <!--<router-link tag="li" class="module set_li" to="/brief">-->
        <!--<div class="set_title">个人简介</div>-->
        <!--<span class="iconfont icon-getmore-icon"></span>-->
        <!--<span class="user_brief">请输入简介信息</span>-->
      <!--</router-link>-->

      <!--<li class="set_li">-->
        <!--<div class="set_title">账号安全</div>-->
        <!--<span class="iconfont icon-getmore-icon"></span>-->
      <!--</li>-->

    </ul>
    <div class="shadow"></div>
    <div class="pop sex_grp">
      <div class="module sex_select">
        <div>男</div>
        <div class="select">女</div>
      </div>

      <div class="close">
        取消
      </div>
    </div>
    <router-view></router-view>

  </div>
  </transition>
</template>


<style scoped>

  .set{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    min-height: 1334px;
    background-color: #f5f4f7;
    width: 100%;
  }

  li {
    background-color: white;
    padding: 30px 30px;
    border-bottom: solid 1px #f5f4f7;

  }

  .set_title {
    display: inline;
    font-size: 30px;
  }

  .set_li span {
    display: inline-block;
    float: right;
    margin-left: 8px;
    color: #999;
    font-size: 24px;

  }

  .set_li span:nth-of-type(2) {
    line-height: 40px;
  }

  .set_li .icon-getmore-icon {
    font-size: 34px;
  }

  li:nth-of-type(1) {
    padding: 36px 30px;
  }

  .img_grp {
    float: right;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin: -20px auto 0 auto;
    border: solid 1px #c5c5c7;
  }

  .pop {
    bottom: 30px;
  }

  .sex_grp {
    text-align: center;
    width: 716px;
    margin-left: 17px;
    display: none;
  }

  .sex_select div {
    color: black;
    height: 100px;
    line-height: 100px;
    font-size: 38px;
  }

  .sex_select div:nth-of-type(1) {
    border-bottom: solid 1px #ececec;

  }

  .sex_select {
    background-color: #f5f4f7;
    border-radius: 20px;
  }

  .sex_grp .select {
    color: #059692;

  }

  .sex_grp .close {
    background-color: #fff;
    color: #999;
    border-radius: 20px;
    height: 100px;
    line-height: 100px;
    font-size: 38px;

  }
</style>
